<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/binge.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<!-- header -->
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <div class="header">
        <div class="head-back">
            <a href="javascript:void(0);" tapmode onclick="comeBack()" class="back-btn"></a>
        </div>
        <div id="doubleClick" class="head-title">
            <h6>更多话题</h6>
        </div>
        <!--<div class="head-action">-->
        <!--<a href="javascript:void(0);" tapmode class="action-btn"></a>-->
        <!--</div>-->
    </div>
</div>
<!-- header end -->

<div class="mescroll" id="mescroll" style="padding-top: 1.6rem">
    <div class="topic-before-list">
        <div class="topic-list">
            <ul id="discuss">
                <!--<li tapmode onclick="commonUrl('topic_detail')">
                    <div class="topic-before-title">
                        <h6 class="topic-title single-ellipsis">压力是否越大越好压力？</h6>
                        <span class="time">2019.09.29</span>
                    </div>
                    <p class="topic-num">22456人已参与</p>
                    <div class="topic-vote">
                        <span class="vote choose1" tapmode onclick="choose(1,event)">学历经历经历</span>
                        <span class="vote choose2" tapmode onclick="choose(2,event)">经历经历经历</span>
                    </div>
                    <div class="choose-result" style="display: block">
                        <div class="result1 result">
                            <div class="result-txt"><span class="icon">学历学历学历</span></div>
                            <div class="bar-line">
                                <div class="line" style="width: 70%;"></div>
                            </div>
                            <div class="percentage">70%</div>
                        </div>
                        <div class="result2 result">
                            <div class="result-txt"><span class="icon">经历</span></div>
                            <div class="bar-line">
                                <div class="line" style="width: 30%;"></div>
                            </div>
                            <div class="percentage">30%</div>
                        </div>
                    </div>
                </li>
                <li tapmode onclick="commonUrl('topic_detail')">
                    <div class="topic-before-title">
                        <h6 class="topic-title single-ellipsis">压力是否越大越好压力？</h6>
                        <span class="time">2019.09.29</span>
                    </div>
                    <p class="topic-num">22456人已参与</p>

                    <div class="choose-result" style="display: block">
                        <div class="time-over result">
                            <div class="result-txt just-status"><span class="icon">学历学学学学</span></div>
                            <div class="result-line">
                                <div class="result-percentage">
                                    <div class="just-num">70%</div>
                                    <div class="back-num">30%</div>
                                </div>
                                <div class="bar-line">
                                    <div class="line line-just" style="width: 70%;"></div>
                                    <div class="line line-back" style="width: 30%;"></div>
                                </div>
                            </div>
                            <div class="result-txt back-status"><span class="icon">学历学</span></div>
                        </div>
                    </div>
                </li>-->


            </ul>
        </div>
    </div>
</div>

</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css"/>
<script type="text/javascript" src="../../script/mescroll.min.js"></script>
<script type="text/javascript">
    var page = 1,//页码
        pullUp = true;
        apiready = function () {

            setFixStatusBar(); //设置状态栏
            keybackListener()

            api.addEventListener({
                name: 'topiclist'
            }, function (ret, err) {
                getTopicList()
            });


            //获取话题列表
            getTopicList();


        };

    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        },
        up: {
            auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            /*toTop:{ //配置回到顶部按钮
                src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                //offset : 1000
            }*/
        }
    });
    /*下拉刷新的回调 */
    function downCallback() {
        page = 1;
        getTopicList()

        //mescroll.endErr();
    }
    /*上拉加载的回调 */
    function upCallback() {
        if (pullUp == true) {
            getTopicList();
        }else {
            mescroll.endErr();
        }
    }


    //获取话题列表
    function getTopicList() {
        var param = {
            token: $api.getStorage('token'),
            page: page
        }
        pop.loading();
        getAjax(Interface.discuss_indx, param, function (res) {
            console.log(jsonChange(res))
            var data = res.data.list;
            var discussHtml = '';
            if (isDefine(data)) {
                for (var i = 0; i < data.length; i++) {
                    var result;
                    var param = {"discuss_id": data[i].id, "today": 2}
                    var over_time = '未知';
                    if(isDefine(data[i].over_time)){
                        over_time = data[i].over_time;
                    }
                    if(data[i].over_status == 1){

                        if (isDefine(data[i].so)) {
                            if (data[i].so == 1) {
                                result = '<div class="choose-result" style="display: block;"><div class="result1 result">' +
                                    '                    <div class="result-txt"><span class="icon">' + data[i].just_title + '</span></div>' +
                                    '                    <div class="bar-line">' +
                                    '                         <div class="line" style="width: ' + data[i].rate + '%; background: #7dcec8"></div>' +
                                    '                    </div>' +
                                    '                    <div class="percentage">' + data[i].rate + '%</div>' +
                                    '</div></div>';
                            } else {
                                result = '<div class="choose-result" style="display: block;"><div class="result2 result">' +
                                    '                    <div class="result-txt"><span class="icon">' + data[i].back_title + '</span></div>' +
                                    '                    <div class="bar-line">' +
                                    '                         <div class="line" style="width: ' + data[i].rate + '%; background: #fe7678"></div>' +
                                    '                    </div>' +
                                    '                    <div class="percentage">' + data[i].rate + '%</div>' +
                                    '</div></div>';
                            }

                            discussHtml += '<li tapmode onclick=\'commonUrl("topic_detail",' + jsonChange(param) + ')\'>' +
                                '                    <div class="topic-before-title">' +
                                '                       <h6 class="topic-title multiline-ellipsis">' + data[i].title + '</h6>' +
                                '                       <span class="time">'+data[i].create_time+'</span>' +
                                '                    </div>' +
                                '                    <p class="topic-num">' + data[i].count + '人已参与 <span>截止时间：'+over_time+'</span></p>' + result + '</li>'
                        } else {
                            discussHtml += '<li tapmode onclick=\'commonUrl("topic_detail",' + jsonChange(param) + ')\'>' +
                                '                    <div class="topic-before-title">' +
                                '                       <h6 class="topic-title multiline-ellipsis">' + data[i].title + '</h6>' +
                                '                       <span class="time">'+data[i].create_time+'</span>' +
                                '                    </div>' +
                                '                    <p class="topic-num">' + data[i].count + '人已参与 <span>截止时间：'+over_time+'</span></p>' +
                                '                    <div class="topic-vote" data-num="' + data[i].count + '">' +
                                '                        <span class="vote choose1" tapmode data-status="'+data[i].over_status+'" onclick="choose(' + data[i].id + ',1,event,this)">' + data[i].just_title + '</span>' +
                                '                        <span class="vote choose2" tapmode data-status="'+data[i].over_status+'" onclick="choose(' + data[i].id + ',0,event,this)">' + data[i].back_title + '</span>' +
                                '                    </div>' +
                                '                    <div class="choose-result">' +
                                '                        <div class="result1 result">' +
                                '                            <div class="result-txt"><span class="icon">' + data[i].just_title + '</span></div>' +
                                '                            <div class="bar-line">' +
                                '                                <div class="line" style="width: ' + data[i].rate + '%; background: #7dcec8"></div>' +
                                '                            </div>' +
                                '                            <div class="percentage">' + data[i].rate + '%</div>' +
                                '                        </div>' +
                                '                        <div class="result2 result">' +
                                '                            <div class="result-txt"><span class="icon">' + data[i].back_title + '</span></div>' +
                                '                            <div class="bar-line">' +
                                '                                <div class="line" style="width: ' + data[i].rate + '%;background: #fe7678"></div>' +
                                '                            </div>' +
                                '                            <div class="percentage">' + data[i].rate + '%</div>' +
                                '                        </div>' +
                                '                    </div></li>'
                        }

                    }else {

                        result = '<div class="choose-result" style="display: block">' +
                            '                        <div class="time-over result">' +
                            '                            <div class="result-txt just-status"><span class="icon">'+data[i].just_title+'</span></div>' +
                            '                            <div class="result-line">' +
                            '                                <div class="result-percentage">' +
                            '                                    <div class="just-num">'+data[i].just_rate+'%</div>' +
                            '                                    <div class="back-num">'+data[i].back_rate+'%</div>' +
                            '                                </div>' +
                            '                                <div class="bar-line">' +
                            '                                    <div class="line line-just" style="width: ' + data[i].just_rate + '%;"></div>' +
                            '                                    <div class="line line-back" style="width: ' + data[i].back_rate + '%;"></div>' +
                            '                                </div>' +
                            '                            </div>' +
                            '                            <div class="result-txt back-status"><span class="icon">'+data[i].back_title+'</span></div>' +
                            '                        </div>' +
                            '                    </div>';

                        discussHtml += '<li tapmode onclick=\'commonUrl("topic_detail",' + jsonChange(param) + ')\'>' +
                            '                    <div class="topic-before-title">' +
                            '                       <h6 class="topic-title multiline-ellipsis">' + data[i].title + '</h6>' +
                            '                       <span class="time">'+data[i].create_time+'</span>' +
                            '                    </div>' +
                            '                    <p class="topic-num">' + data[i].count + '人已参与 <span>截止时间：'+over_time+'</span></p>' + result + '</li>'

                    }

                }
                if(page==1){
                    $("#discuss").html(discussHtml);
                }else {
                    $("#discuss").append(discussHtml);
                }
                page++;
                pullUp = true;
            }else {
                if(page==1){
                    $("#discuss").html(noData);
                }else {
                    $("#discuss").append('<p class="t-c c-999 pt30 pb40 lh48">暂无更多话题</p>');
                }
                pullUp = false;
            }


            pop.close();

            mescroll.endErr()

        }, function (error) {
            pop.close();
            pop.notice(error.msg);
            $("#discuss").html(noData);
            mescroll.endErr()
        })
    }

    //话题投票
    function choose(discuss_id, type, event, that) {
        event.stopPropagation();
        var _this = that;
        if($(that).attr('data-status') == 2){
            pop.notice('该话题投票时间已截止');
            return;
        }
        var param = {
            token: $api.getStorage('token'),
            discuss_id: discuss_id,
            type: type,
        }
        getAjax(Interface.discuss_vote, param, function (res) {
            var rate = res.data.rate;
            var topicNum = Number($(_this).parents('.topic-vote').attr('data-num')) + 1;
            if (type == 1) {
                //赞成
                $(_this).parents('.topic-vote').hide().siblings('.choose-result').show().find('.result2').hide();
            } else {
                //反对
                $(_this).parents('.topic-vote').hide().siblings('.choose-result').show().find('.result1').hide();
            }
            $(_this).parents('.topic-vote').siblings('.choose-result').find('.line').css({width: rate + '%'});
            $(_this).parents('.topic-vote').siblings('.choose-result').find('.percentage').html(rate + '%');
            $(_this).parents('.topic-vote').siblings('.topic-num').html(topicNum + '人已参与');

            pop.notice(res.msg)
        }, function (error) {
            pop.notice(error.msg)
        })
    }


</script>
